<template>
  <div class="page-goods df">
    <div class="navs fn">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          @click="handleClick"
          v-for="item in navList"
          :key="item"
          :title="item"
        />
      </van-sidebar>
    </div>
    <div class="f1 right-container">
      <!-- 商品列表 -->
      <div class="goods-list">
        <!-- 商品 -->
        <div v-for="item in goodsList" :key="item.name" class="good-item">
          <h3 class="title">{{ item.name }}</h3>
          <!-- 食品列表 -->
          <div class="foods-list">
            <!-- 食品 -->
            <van-card
              v-for="subItem in item.foods"
              :key="subItem.id"
              :price="subItem.price"
              :desc="subItem.goodsDesc"
              :title="subItem.name"
              :thumb="subItem.imgUrl"
            >
              <template #footer>
                <van-stepper
                  :min="0"
                  default-value="0"
                  v-model="subItem.count"
                  theme="round"
                  button-size="22"
                  disable-input
                />
              </template>
            </van-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//
import {mapGetters, mapState} from 'vuex'
//引入bs
import BScroll from '@better-scroll/core'
export default {
  data() {
    return {
      activeKey: 0,
      //获取到的高度   push到这个数组
      heightList: [],
      //左右脱绑定义
      loading: false,
    }
  },
  methods: {
    //点击菜单
    handleClick(index) {
      // activeKey  根据点击次数
      this.activeKey = index
      //获取dom   联动navs的点击触发跳转商品卡片索引
      const goodsNodes = document.querySelectorAll('.good-item')
      this.bs2.scrollToElement(goodsNodes[this.activeKey], 600)
      // console.log('goodsNodes :>> ', goodsNodes)
      // console.log('this.activeKey :>> ', this.activeKey)
      // console.log('index :>> ', index)
    },
  },
  computed: {
    ...mapGetters('shop', ['navList']),
    ...mapState('shop', ['goodsList']),
  },

  async created() {
    //发送请求
    await this.$store.dispatch('shop/A_getGoodsData')
    // console.log('this.goodsList :>> ', this.goodsList)

    //需dom执行后  才执行滚动
    this.$nextTick(() => {
      this.bs1 = new BScroll('.navs', {
        click: true,
        probeType: 3,
      })
      this.bs2 = new BScroll('.right-container', {
        click: true,
        probeType: 3,
      })
      const goodsNodes = document.querySelectorAll('.good-item')
      //获取所有good-item盒子的高度装进heightList数组里
      goodsNodes.forEach(el => {
        this.heightList.push(el.clientHeight)
      })
      // console.log('this.heightList :>> ', this.heightList)
      //获取商品卡片区的高度  监听滚动
      this.bs2.on('scroll', ({y}) => {
        //如果左侧在点击  则不需要监听
        // console.log('loading :>> ', this.loading)
        if (this.loading) return

        let Y = Math.abs(y)
        // console.log('y :>> ', y)
        //将获取到的盒子高度和左边的navs进行联动
        this.heightList.reduce((total, cur, index) => {
          //判断 索引0  y>0 && y<第一个盒子的高度
          //    索引1  y>1 && y<第一个和第二个盒子的高度...
          if (Y > total && Y < total + cur) {
            //将拿到的索引赋给index
            this.activeKey = index
          }
          // console.log('activeKey :>> ', this.activeKey)
          return total + cur
        }, 0)
      })

      //bs2 结束滚动loading为false
      this.bs2.on('scrollEnd', () => {
        this.loading = false
      })
    })
  },
}
</script>

<style lang="scss" scoped>
.page-goods {
  height: 100%;
}
.title {
  height: 40px;
  line-height: 40px;
  background: #fff;
  padding-left: 5px;
  border-left: 6px solid #fff;
}
</style>
